import Head from "next/head";
import FoodTruckContent from "@/components/food-truck-detail/FoodTruckContent";
import FoodTruckLogistics from "@/components/food-truck-detail/FoodTruckLogistics";
import FoodTruckSummary from "@/components/food-truck-detail/FoodTruckSummary";
import { getFoodTruckById, getCollectedFoodTrucks } from "@/services";

const FoodTruckDetails = (props) => {
  const { selectedFoodTruck } = props;
  if (!selectedFoodTruck) {
    return (
      <>
        <div className="center">
          <p>Loading...</p>;
        </div>
      </>
    );
  }
  return (
    <>
      <Head>
        <title>FoodTruck Detail Page</title>
        <meta
          name="description"
          content={`${selectedFoodTruck.applicant}'s food truck is the best, they provide delicious food and tasty drinks.`}
        />
      </Head>
      <FoodTruckSummary title={`Welcome to our food truck`} />
      <FoodTruckLogistics
        cnn={selectedFoodTruck.cnn}
        address={selectedFoodTruck.address}
        image={selectedFoodTruck.image}
        imageAlt={selectedFoodTruck.applicant}
      />
      <FoodTruckContent>
        <h2>What delicious food we offer</h2>
        <p>{selectedFoodTruck.foodItems}</p>
      </FoodTruckContent>
    </>
  );
};

export default FoodTruckDetails;

export async function getStaticProps(context) {
  const id = context.params.id;

  const selectedFoodTruck = await getFoodTruckById(id);
  return {
    props: {
      selectedFoodTruck,
    },
    revalidate: 30,
  };
}

export async function getStaticPaths() {
  const foodTrucks = await getCollectedFoodTrucks();

  const paths = foodTrucks.map((selectedFoodTruck) => ({
    params: {
      id: selectedFoodTruck.id,
    },
  }));
  return {
    paths: paths,
    fallback: "blocking",
  };
}
